<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心-阿里迪里影院</title>
    <link href="images/favicon.ico" rel="shortcut icon" />

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/order.css">
    <style>
        .gg {
            display: none !important;
        }

        #delico:hover {
            color: orange;
            cursor: pointer;
        }
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>

</head>

<body>
    <!-- 导航栏部分 -->
    <div class="head">
        <div class="head-inner">
            <div class="logo"><img src="images/logo.jpg">阿里迪里影院</div>

            <div class="nav">
                <ul class="navbar">
                    <li><a class="shouye" href="home_index.html">首页</a></li>
                    <li><a href="home_filmType.html">电影</a></li>
                    <li><a href="https://maoyan.com/cinemas">影院</a></li>
                    <li><a href="http://www.gewara.com/">演出</a></li>
                    <li><a href="https://maoyan.com/board">榜单</a></li>
                    <li><a href="https://maoyan.com/news">热点</a></li>
                    <li><a href="https://maoyan.com/edimall">商城</a></li>
                </ul>
            </div>

            <form>
                <input type="text" id="cond" required placeholder="找影片、 影剧" class="search">
                <input class="sub" type="button" title="点击可搜索你喜爱的电影哦。" id="commit">
            </form>

            <div class="user-info">
                <ul class="layui-nav layui-layout-right" style="background-color:#fff;">
                    <li class="layui-nav-item"><a href="javascript:;">
                            <img id="pic" class="layui-nav-img"></a>
                        <dl class="layui-nav-child">
                            <dd id="h1" class="subMenu">
                                <a href="home_myOrder.html">我的订单</a>
                            </dd>
                            <dd id="h2" class="subMenu">
                                <a href="home_information.html">个人中心</a>
                            </dd>
                            <dd id="h3" class="subMenu">
                                <a id="logout">退出登录</a>
                            </dd>
                        </dl>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <!-- 个人中心部分 -->

    <div class="container" id="myOrder" v-cloak>
        <div class="content">
            <div class="main">
                <div class="info-content" style="overflow-y:scroll;">
                    <div class="user-profile-nav">
                        <h1>个人中心</h1>
                        <a href="home_myOrder.html" class="orders active">我的订单</a>
                        <a href="home_information.html" class="profile ">基本信息</a>
                    </div>
                    <div class="orders-container">
                        <div class="profile-title">我的订单</div>
                        <div class="order-box" v-for="(o,i) in orders" :key="i">
                            <div class="order-header">
                                <span class="order-date">{{o.orderTime}}</span>
                                <span class="order-id">阿里迪里影院订单号:{{o.orderId}}</span>
                                <span class="layui-icon" id="delico" title="删除订单"
                                    @click="delOrder(o.orderId,i)">&#xe640;</span>
                            </div>
                            <div class="order-body">
                                <div class="poster" @click="filmInfo(o.filmId)">
                                    <img v-bind:src="'../images/'+o.filmPicture">
                                </div>
                                <div class="order-content">
                                    <div class="movie-name">《{{o.filmName}}》</div>
                                    <div class="cinema-name">阿里迪里影院</div>
                                    <div class="hall-ticket" @click="goSeatChoose(o.showId)" style="cursor: pointer;" title="点击进入选座">
                                        <span>{{o.seats}}</span>

                                        <div class="show-time">{{o.showDate}} {{o.startTime}}</div>
                                    </div>
                                </div>
                                <div class="order-price">￥{{o.price}}</div>
                                <div class="order-status">{{o.status==0?'待支付':'已完成'}}</div>
                                <div class="actions">
                                    <div>
                                        <a :class="{gg:o.status==1}" @click="pay(o.orderId)"
                                            class="layui-btn layui-btn-radius layui-btn-danger pay-btn">付款</a>
                                        <span class="order-detail" @click="look(o)">查看详细</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 删除提示框 -->
                        <div class="hide-prompt" style="display: none;">
                            <div class="hide-prompt-model">
                                <span></span>
                                <p>您确定要删除该订单嘛？删除后，不可恢复～</p>
                                <div class="ok-btn" @click="yes">确定</div>
                                <div class="no-btn" @click="no">取消</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--底部版块部分-->
    <div class="footer">
        <p class="footer-font">
            关于阿里迪里：
            <a href="#">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">管理团队</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="#">投资者关系</a>&nbsp;&nbsp;&nbsp;&nbsp;
            友情链接：
            <a href="https://maoyan.com/films">猫眼电影</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/cinemas">猫眼影院</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/edimall">猫眼商城</a>
        </p>

        <p>
            商务合作邮箱：alidli@qq.com &nbsp;&nbsp;|&nbsp;&nbsp;客服电话：10104422
        </p>

        <p class="footer-font">
            Copyright &copy; 2020 - {{nowYear}} 版权所有| by<a href="http://www.gd-nf.com.cn/"> gd-nf</a>
        </p>

        <p>
            &copy;2020 阿里迪里影视 alidli.com
        </p>

        <div class="footer-end">
            <img src="images/bankuai1.png"><img src="images/bankuai2.png"><img src="images/bankuai3.png">
        </div>
    </div>

    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/home-myOrder.js"></script>
    <script src="js/home-same.js"></script>
</body>
</html>